@import (reference) "~ui/styles/variables";
@import (reference) "~ui/styles/mixins";

.typeahead {
  position: relative;

  .typeahead-items {
    border: 1px solid;
    border-color: @typeahead-item-border;
    color: @typeahead-item-color;
    background-color: @typeahead-item-bg;
    position: absolute;
    top: 32px;
    z-index: @zindex-typeahead;
    box-shadow: 0px 4px 8px rgba(0,0,0,.1);
    width: 100%;
    border-radius: 4px;

    .typeahead-item {
      border-bottom: 1px solid;
      border-bottom-color: @globalColorLightestGray;
      padding: @padding-base-vertical @padding-base-horizontal;
    }

    .typeahead-item:last-child {
      border-bottom: 0px;
      border-radius: 0 0 4px 4px;
    }

    .typeahead-item:first-child {
      border-bottom: 0px;
      border-radius: 4px 4px 0 0;
    }

    .typeahead-item.active {
      color: @globalColorWhite;
      background-color: @typeahead-item-active-bg;
    }
  }
}

.inline-form .typeahead.visible .input-group {
  > :first-child {
    .border-bottom-radius(0);
  }
  > :last-child {
    .border-bottom-radius(0);
  }
}
